<template>
  <div id="app">
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <p>商品清单如下:</p>
          <ul>
            <li v-for="cartListData in cartListDatas" :key="cartListData.id">
              {{ cartListData.proName }}---{{ cartListData.price }}
            </li>
          </ul>
          <p>请选择购买数量:</p>
          <ul>
            <li v-for="cartListData in cartListDatas" :key="cartListData.id">
              <!-- 父传子 
              ①以属性的形式将数据绑定到子组件上,传递数据
              ②子组件以props属性接受,接受数据
              -->
              <count-view
                :cartListData="cartListData"
                @addevent="addFaFun"
                @minusevent="minusFaFun"
              ></count-view>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CountView from "./components/CountView.vue";
export default {
  name: "App",
  components: { CountView },
  data() {
    return {
      cartListDatas: [
        { id: 1, proName: "可比克薯片", price: 5.5, count: 0 },
        { id: 2, proName: "草莓酱", price: 3.5, count: 0 },
        { id: 3, proName: "红烧肉", price: 55, count: 0 },
        { id: 4, proName: "方便面", price: 12, count: 0 },
      ],
    };
  },
  methods: {
    addFaFun(id) {
      let targetData = this.cartListDatas.find((item) => {
        return item.id == id;
      });
      console.log(targetData);
      targetData.count++;
    },
    minusFaFun(id) {
      let targetData = this.cartListDatas.find((item) => {
        return item.id == id;
      });
      console.log(targetData);
      targetData.count--;
    },
  },
};
</script>

<style>
</style>
